<template>
  <div class="common-use">
    <div class="module-title">
      <img src="@images/home/common-use.png" alt="" />
      <span>我的常用</span>
    </div>
    <el-scrollbar class="common-scroll">
      <div class="module-con">
        <div class="con-item" @click="goKh(item.url)" v-for="item in showList.slice(0, 9)" :key="item.id">
          <div class="con-icon">
            <i :class="item.icon"></i>
          </div>
          <div class="con-name">{{ item.name }}</div>
        </div>
      </div>
    </el-scrollbar>
  </div>
</template>
<script>
export default {
  name: 'CommonUse',
  emits: [],
  props: {
    source: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      userMenus: [],
      applyList: [
        {
          id: 0,
          icon: 'iconfont icon-pdjishiben_huaban1',
          name: '纪实本',
          url: '/document/index-list',
        },
        {
          id: 40,
          icon: 'iconfont icon-pdpingyilan_huaban1',
          name: '评议栏',
          url: '/evaluate/list',
        },
        {
          id: 20,
          icon: 'iconfont icon-pdchengguoku_huaban1',
          name: '日常考勤',
          url: '/attendance',
        },
        {
          id: 100,
          icon: 'iconfont icon-pdkaohedengciguanli_huaban1',
          name: '等次管理',
          url: '/grade-manage',
        },
        {
          id: 50,
          icon: 'iconfont icon-pdjiafenxiangguanli_huaban1',
          name: '加分项',
          url: '/bonus/add',
        },
        {
          id: 60,
          icon: 'iconfont icon-pdzonghecepingguanli',
          name: '民主测评',
          url: '/minzhu/create',
        },
        {
          id: 80,
          icon: 'iconfont icon-pdzonghecepingguanli',
          name: '测评管理',
          url: '/minzhu/assess',
        },
        {
          id: 120,
          icon: 'iconfont icon-pda-gongzuojianbao_huaban1',
          name: '工作通知',
          url: '/examine/file/gztz',
        },
        {
          id: 140,
          icon: 'iconfont icon-pdzhiduwenjian',
          name: '制度文件',
          url: '/examine/file/zdwj',
        },
        {
          id: 30,
          icon: 'iconfont icon-pdshangwuhuiyi',
          name: '会议管理',
          url: '/meet',
        },
        {
          id: 25,
          icon: 'iconfont icon-pdhouqinwuzi',
          name: '日常管理',
          url: '/daily',
        },
      ],
      showList: [],
    }
  },
  computed: {},
  created() {
    const menu = []
    const arr = JSON.parse(localStorage.getItem('PSKH_PERMISSIONS')).filter(item => {
      return item.belongPage === 'JXKH_PSKH'
    })
    arr.length &&
      arr[0].menuVOS.forEach(li => {
        menu.push(li.belongPage)
      })
    this.userMenus = menu

    this.pushList()
  },
  methods: {
    goKh(path) {
      this.$router.push(path)
    },
    pushList() {
      const arr = []
      if (this.userMenus.includes('PSKH_DOCUMENTARY_EDITION')) {
        arr.push(this.applyList[0])
      }
      if (this.userMenus.includes('PSKH_EVALUATION_COLUMN')) {
        arr.push(this.applyList[1])
      }
      if (this.userMenus.includes('PSKH_ATTENDANCE_MANAGE')) {
        arr.push(this.applyList[2])
      }
      if (this.userMenus.includes('PSKH_GRADE_MANAGE')) {
        arr.push(this.applyList[3])
      }
      if (this.userMenus.includes('PSKH_BONUS_ADD')) {
        arr.push(this.applyList[4])
      }
      if (this.userMenus.includes('PSKH_MINZHU_ASSESS')) {
        arr.push(this.applyList[5])
      }
      if (this.userMenus.includes('PSKH_MINZHU_MANAGE_ASSESS')) {
        arr.push(this.applyList[6])
      }
      if (this.userMenus.includes('PSKH_DAILY_MANAGE')) {
        arr.push(this.applyList[10])
      }
      arr.push(this.applyList[7], this.applyList[8], this.applyList[9])
      arr.sort((a, b) => {
        return a.id - b.id
      })
      this.showList = arr
    },
  },
}
</script>
<style lang="scss" scoped>
.common-use {
  height: 100%;
  .module-title {
    display: flex;
    align-items: center;
    padding: 0 20px;
    span {
      font-size: 18px;
      font-weight: bold;
      margin-left: 9px;
    }
  }
  .common-scroll {
    height: calc(100% - 30px);
    margin-top: 15px;
    .module-con {
      flex: 1;
      display: flex;
      flex-wrap: wrap;

      padding-bottom: 10px;
      padding: 0 20px 10px;
      .con-item {
        border: 1px solid #d7e4eb;
        border-radius: 4px;
        // width: 160px;
        width: 30%;
        height: 40px;
        // margin-right: 15px;
        margin-right: 5%;
        display: flex;
        align-items: center;
        cursor: pointer;
        &:nth-child(3n) {
          margin-right: 0;
        }
        &:nth-child(n + 4) {
          margin-top: 15px;
        }
        .con-icon {
          width: 25px;
          height: 25px;
          background: #e5f0ff;
          border-radius: 4px;
          display: flex;
          align-items: center;
          justify-content: center;
          margin: 0 10px;
          .el-icon-s-marketing {
            width: 14px;
            height: 15px;
            color: #3585d5;
          }
          .iconfont {
            color: #0060c4;
          }
        }
        .con-name {
          font-size: 14px;
          line-height: 18px;
          font-weight: bold;
        }
      }
    }
  }
}
</style>
